<template>
  <div class="app">
    <van-nav-bar title="我的资料" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="body">
      <div class="by_1">
        <span class="sp_2">头像</span>
        <div>
          <van-uploader class="Tou" :after-read="afterRead" upload-icon="user-circle-o" />
          <van-icon class="icon_sp2" color="rgb(175 174 174)" name="arrow" />
        </div>
      </div>

      <div class="by_2">
        <span class="sp_2">昵称</span>
        <input type="text" placeholder="新用户" />
        <van-icon color="rgb(175 174 174)" name="arrow" />
      </div>
      <div class="by_3">
        <span class="sp_3">职业</span>
        <input type="text" placeholder="未知" />
        <van-icon color="rgb(175 174 174)" name="arrow" />
      </div>
      <div class="by_4">
        <span class="sp_4">联系电话</span>
        <input
          type="number"
          placeholder="请输入您的电话"
          v-model="phone1.val"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          @blur="teltest()"
        />
      </div>
      <p class="CuoWu" v-show="telShow">{{ tel }}</p>
      <div class="by_5">
        <span class="sp_5">诚信等级</span>
        <span class="sp_5_1" @click="tishi">100</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      afterRead() {},
      telShow: false,
      tel: "手机号码错误",
      phone1: {
        val: "",
        err: false,
        pass: false
      }
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.back();
    },
    tishi() {
      Toast({
        message: "这里不能修改 :)",
        position: "bottom"
      });
    },
    teltest() {
      const reg = /^1[0-9]{10}$/;
      if (
        this.phone1.val == "" ||
        this.phone1.val.length <= 10 ||
        !reg.test(this.phone1.val)
      ) {
        this.telShow = true;
        this.tel = "手机号码错误";
        this.err = true;
        return false;
      } else {
        this.telShow = false;
        this.tel = "手机号码正确";
        this.err = false;
        this.telShow = "";
        return true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app {
  padding-left: 5px;
  .head {
    width: 100%;
    height: 27px;
    position: relative;
    .sp_1 {
      font-weight: 540;
      font-size: 19px;
      position: absolute;
      left: 40%;
    }
  }
  .body {
    padding-left: 10px;
    .by_1 {
      width: 100%;
      height: 82px;
      border-bottom: 1px solid #ece4e4;
      .sp_2 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        margin-top: 23px;
      }
      .Tou {
        margin-left: 57%;
      }
      // .bgimg {
      //   width: 72px;
      //   height: 82px;
      //   float: left;
      //   background-image: url("../assets/MyPac/b1.png");
      //   margin-left: 58%;
      // }
      .icon_sp2 {
        margin-top: 27px;
      }
    }
    .by_2 {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ece4e4;
      text-align: center;
      line-height: 45px;
      .sp_2 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        line-height: 45px;
      }
      input {
        outline: none;
        border: none;
        text-align: right;
        width: 68%;
        padding: 0 15px;
      }
      input:focus::-webkit-input-placeholder {
        color: transparent;
      }
    }
    .by_3 {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ece4e4;
      text-align: center;
      line-height: 45px;
      .sp_3 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        line-height: 45px;
      }
      input {
        outline: none;
        border: none;
        text-align: right;
        width: 68%;
        padding: 0 15px;
      }
      input:focus::-webkit-input-placeholder {
        color: transparent;
      }
    }
    .by_4 {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ece4e4;
      text-align: center;
      line-height: 45px;
      .sp_4 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        line-height: 45px;
      }
      input {
        outline: none;
        border: none;
        text-align: right;
        width: 65%;
        padding: 0 15px;
      }
      input:focus::-webkit-input-placeholder {
        color: transparent;
      }
    }
    .CuoWu {
      color: red;
      margin-left: 65%;
    }
    .by_5 {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #ece4e4;
      text-align: center;
      line-height: 45px;
      .sp_5 {
        font-size: 18px;
        font-weight: 500;
        float: left;
        line-height: 45px;
      }
      .sp_5_1 {
        color: #848282;
        margin-left: 50%;
      }
    }
  }
}
</style>